<template>
    <div>
        <!-- <div class="listTitle">排行榜</div> -->
        <div class="mode">
            <span>排名方式：</span>
            <el-radio-group v-model="selecrMode" size="large" @change="changeRadio">
                <el-radio-button label="num">答题次数</el-radio-button>
                <el-radio-button label="scoreAvg">平均分</el-radio-button>
                <el-radio-button label="scoreSun">总分</el-radio-button>
                <el-radio-button label="time">课时</el-radio-button>
            </el-radio-group>
        </div>

        <el-table v-loading="loading" ref="tableRef" :data="dataList" stripe @selection-change="handleSelectionChange"
            row-key="id">
            <el-table-column label="排名方式" align="center">
                <template #default="scope">
                    <img v-if="scope.$index+1==1" class="bgrank" :src="ranking1" />
                    <img v-else-if="scope.$index+1==2" class="bgrank" :src="ranking2" >
                    <img v-else-if="scope.$index+1==3" class="bgrank" :src="ranking3" />
                    <span v-else>{{ scope.$index+1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="昵称" align="center" prop="createUser" />
            <el-table-column label="平均分" align="center" prop="scoreAvg" />
            <el-table-column label="答题次数" align="center" prop="num" />
            <el-table-column label="总分" align="center" prop="scoreSun" />
            <el-table-column label="课时" align="center" prop="time" />
        </el-table>
    </div>
</template>

<script setup name="list">
import { getRanking } from '@/api/knowledgeLearn/online/practiceInClass.js';
import ranking1 from "@/assets/icon/ranking1.png"
import ranking2 from "@/assets/icon/ranking2.png"
import ranking3 from "@/assets/icon/ranking3.png"
const dataList = ref([]);
const selecrMode = ref('num');
const loading = ref(false);
function ranking() {
    loading.value = true;
    getRanking().then(res => {
        loading.value = false;
        dataList.value = res.data;
        dataList.value.sort((a,b)=>{
            return b[selecrMode.value]-a[selecrMode.value];
        })
    })
}

function changeRadio(){
    ranking();
}

onMounted(() => {
    ranking();
})
</script>

<style scoped lang="scss">
.listTitle {
    text-align: center;
    font-size: 30px;
    margin: 30px auto !important;
}
.mode{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20px;
}
.bgrank{
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-top: 6px;
}
// .bgrank1{
//     background-image:url(/src/assets/icon/ranking1.png) ;
// }
// .bgrank2{
//     background-image:url(/src/assets/icon/ranking2.png) ;
// }
// .bgrank3{
//     background-image:url(/src/assets/icon/ranking3.png) ;
// }
</style>